import * as THREE from 'three';
import { Vector3 } from 'three';
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { Line2 } from 'three/examples/jsm/lines/Line2.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

// 创建场景、相机和渲染器
// 创建场景
var scene = new THREE.Scene();
var canvas = document.getElementById('container') as HTMLCanvasElement
var renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})

var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 1, 1000)
camera.position.set(100, 100, 200)
camera.lookAt(0, 0, 0)

var controls = new OrbitControls(camera, renderer.domElement)
controls.update()

// 创建环境光
var ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

const geometry = new THREE.BufferGeometry();

// 构造用于渲染的线组成部分
const positionArray = [];
const indices = [0, 1, 1, 2, 2, 3, 3, 0]; // 顶点索引
// 假设线是 (x1, y1, z1) -> (x2, y2, z2) 的线段
const positions = [
    0, 0, 0,
    10, 10, 10,
    10, 15, 10,
    10, 15, 15,
];

geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));
const material = new THREE.LineBasicMaterial();
// const line = new THREE.LineSegments(geometry, material);

// 包含 EdgeShader 和 LineBasicMaterial 的着色器程序
const edgeVertexShader = [

    'uniform float offset;',
    'void main() {',
    '  vec4 pos = vec4( modelViewMatrix * vec4( position + normal * offset, 1.0 ) );',
    '  gl_Position = projectionMatrix * pos;',
    '}',
].join('\n');

const edgeFragmentShader = [
    'void main() {',
    '  gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );',
    '}',
].join('\n');

const edgeUniforms = {
    offset: {
        value: 1,
    },
};

const edgeMaterial = new THREE.ShaderMaterial({
    uniforms: edgeUniforms,
    vertexShader: edgeVertexShader,
    fragmentShader: edgeFragmentShader,
    side: THREE.BackSide,
});

// 创建 OutlinePass
const outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera
);

outlinePass.renderToScreen = true;
outlinePass.edgeStrength = 3;
outlinePass.edgeGlow = 0.5;
outlinePass.pulsePeriod = 1;

const lineSegments = new THREE.LineSegments(geometry, edgeMaterial);
scene.add(lineSegments);

outlinePass.selectedObjects= [lineSegments]




function _render() {
    const me = this

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(_render);
    // 更新 edgeMaterial 中的偏移量，以显示轮廓
    // edgeMaterial.uniforms.offset.value = 0.07 * (1 + Math.sin(Date.now() * 0.005));
}

_render()